
let addUser = document.querySelector("#add-user")
let double = document.querySelector("#double");
let showMillionaire = document.querySelector("#show-millionaire");
let sortList = document.querySelector("#sort");
let getSun = document.querySelector("#calculate");
let H2 = main.querySelectorAll("h2:not(:first-child)");

let index =0;//初始化下标，如果遍历不添加下标，得到的只有最后一个

//添加账户
addUser.addEventListener("click",function(){
  //声明一个新的div元素，把它推到main里面
  let main = document.querySelector("#main");
  // console.log(main);
  let newDiv = document.createElement("h2");
  newDiv.style.marginBottom = "16px";
  //向main里面捉个添加账户
  if(index < dataInfo.length) {
      newDiv.innerHTML = 
      `
      <strong>${dataInfo[index]["name"]}</strong>
      <span>${dataInfo[index]["money"]}</span>
      `
      main.appendChild(newDiv);
      index++;
  }
})

//资产翻倍
double.addEventListener("click",function(){
  //因为querySelector获取的是静态的，所以在这里需要重新获取
  H2 = main.querySelectorAll("h2:not(:first-child)");
  // console.log(H2);
  //点击一次，就对页面上所有的money进行自乘2一次
  for(let i =0 ;i<H2.length; i++) {
    H2[i].lastElementChild.innerHTML = H2[i].lastElementChild.innerHTML*2;
    // console.log(H2[i].lastElementChild.innerHTML);
  }
})

//查询百万富翁
showMillionaire.addEventListener("click",function(){
  H2 = main.querySelectorAll("h2:not(:first-child)");
  for(let i = 0; i < H2.length; i++) {
    if(H2[i].lastElementChild.innerHTML < 1000000){
      H2[i].lastElementChild.parentElement.remove();
    }
  }
})

//财富榜
let newArr = [];
sortList.addEventListener("click",function(){
  let main = document.querySelector("#main");

  H2 = main.querySelectorAll("h2:not(:first-child)");
  // console.log(H2);
  H2.forEach(function(item){
    newArr.push(item);//把也上所有的h2先装进一个新数组里
    // console.log(item);
  })
  // console.log(newArr);
  //得到一个新的数组，用sort方法对其进行排序
  newArr.sort(function(a,b){
    // console.log(a);//a代表数组里的后一个数
    // console.log(b);//b代表数组里的前一个数
    return b.lastElementChild.innerHTML -a.lastElementChild.innerHTML;
  })
  // console.log(newArr);//得到一个已经排好序的新数组

  //将已经拍好序的新数组里的元素逐个推进main里
  newArr.forEach(function(item){
    main.insertBefore(item , main.lastElementChild);
  })
})

//总金额
let sumArr = [];
getSun.addEventListener("click",function(e){
  H2 = main.querySelectorAll("h2:not(:first-child)");
  H2.forEach(function(item,index){
    sumArr.push(item.lastElementChild.innerHTML);
  })
  // console.log(sumArr);//得到一个全是money的数组

  //用累加器对数组里的数据进行累加
  let res = sumArr.reduce(function(total,item) {
    return total + +item;
  },0)
  // console.log(res);

  // //从新创建一个标签，用来装计算后的结果
  let newH2 = document.createElement("h3");
  newH2.innerHTML = `
  <strong>总金额</strong>
  <span>${res}</span>
  `
  
  if(e.target.innerHTML == "计算总额") {
    sumArr = [];//清除已经计算过的数组元素
    main.appendChild(newH2);
    H3 = main.querySelectorAll("h3");
    H3.forEach(function(item) {
      item.remove();//宁可错杀，也不放过！！！！
      main.appendChild(newH2);
    })
  }
})




